<template>
	<view class="M_oderContain">
		<TabMenu :menus="tabList" :tabCur="tabCur" ref="tableMenu" @clickCtTab="clickCtTab"></TabMenu>
		<!-- 内容信息 -->
		<view class="orderTitle">
			<view class="t_1">订单信息</view>
			<view class="t_2">购买信息</view>
			<view class="t_3">操作</view>
		</view>
		<template v-if="orders.length>0">
			<view class="oneBtnBg" v-if="tabCur==1">
				<view class="money_btn" @click="clickUpdateOrderState(1)">一键付款</view>
			</view>
			<view class="oneBtnBg" v-if="tabCur==2">
				<view class="money_btn" @click="clickUpdateOrderState(2)">一键收款</view>
			</view>
			<view class="oneBtnBg" v-if="tabCur==3">
				<view class="money_btn" @click="clickUpdateOrderState(3)">一键上架</view>
			</view>
			<template v-for="order in orders">
				<view class="infoList">
					<view class="List_1">
						<view>订单ID：{{order.orderNo}}</view>
						<view class="f_red">价格：{{order.price}}</view>
						<view><text>编号：{{order.orderNumber}}</text></view>
						<view><text>名称：{{order.productName}}</text></view>
						<view><img :src="proxyImgUrl(order.productImg)" width="80" height="80" /></view>
						<view class="f_red">上架费：￥{{order.shelvesExpenses}}</view>
						<view class="f_green">待付款</view>
					</view>
					<view class="List_2">
						<view><text>卖家：{{order.sellUserName}}</text></view>
						<view><text>{{order.sellUserPhone}}</text></view>
						<view><text>邀请码：{{order.sellUserInvitationCode}}</text></view>
						<view><text>买家：{{order.buyUserName}}</text></view>
						<view><text>{{order.buyUserPhone}}</text></view>
						<view><text>邀请码：{{order.buyUserInvitationCode}}</text></view>
						<view>创建时间：{{order.createTime}}</view>
						<view>更新时间：{{order.updateTime}}</view>
					</view>
					<view class="List_3">
						<template>
							<view class="buyer_btn" v-if="order.state<=1" @click="showDialog(order.id,'Zppopup')">重选买家</view>
							<view class="money_btn m_t10" v-if="order.state==0"
								@click="clickUpdateOrderStateByOrderId(order.id,1)">确认付款</view>
							<view class="money_btn m_t10" v-if="order.state==1"
								@click="clickUpdateOrderStateByOrderId(order.id,2)">确认收款</view>
							<view class="money_btn m_t10" v-if="order.state==2"
								@click="clickUpdateOrderStateByOrderId(order.id,3)">上架</view>
							<view class="money_btn m_t10" v-if="order.state == 3">已售出</view>
						</template>
					</view>
					
				</view>
			</template>
			<view style="height: 80px;"></view>
		</template>
		<NoData v-else></NoData>
		<view class="page_footer">
			<view class="pagination">
				<view>共{{count}}条</view>
				<view class="grey_btn" @click="previousPage()" :disabled="page.page>=1">上一页</view>
				<view class="blue_btn">1</view>
				<view class="grey_btn" @click="nextPage()">下一页</view>
			</view>
			<view class="tips">
				当前页：{{page.page}}，数据总量：<text>{{count}}</text>条，每页数据：{{page.size}}
			</view>
		</view>
		<!-- 重选买家 -->
		<uni-popup ref="Zppopup" type="center" :animation="false" :mask-click="false">
			<uni-popup-dialog @close="close('Zppopup')" :before-close="true" mode="input" title="提示"
				placeholder="请输入邀请码" @confirm="ZpConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		allManagerOrders,
		updateOrderStateByOrderId,
		easyShuttle,
		setUserInfo
	} from '@/request/api/order.js'
	import config from  '@/request/config.js'
	import TabMenu from '@/components/TabMenu.vue'
	import NoData from '@/components/Nodata.vue'
	export default {
		components: {
			TabMenu,
			NoData
		},
		activated() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		mounted() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		onHide() {
			uni.setStorageSync('abc', 0)
		},
		data() {
			return {
				orderId: '',
				count: 0,
				page: {
					size: 25,
					page: 1
				},
				tabCur: 0,
				tabList: [{
					title: '全部',
				}, {
					title: '待付款',
				}, {
					title: '待收款',
				}, {
					title: '待上架',
				}, {
					title: '已出售',
				}],
				orders: [{
					id: '', // 订单id
					orderNo:'',//订单编号
					orderNumber: '', //订单编号
					shopId: '', //商品Id
					storeId: '', //店铺Id
					buyUserId: '', //买家id
					buyUserName: '', // 买家名称
					buyUserInvitationCode: '', //买家邀请码
					buyUserPhone: '', //买家手机号码
					sellUserId: '', //卖家id
					sellUserName: '', //卖家名称
					sellUserInvitationCode: '', //卖家邀请码
					sellUserPhone: '', //卖家手机号码
					price: '0.00', //价格
					createTime: '', //创建时间
					updateTime: '', //更新时间
					shelvesExpenses: '', //上架费用
					sealTime: '', //封存时间
					productName: '', //商品名称
					productImg: '', //商品图片链接
					productPrice: '', //商品价格
					state: '', // "0:待付款，1:待收款，2:待上架，3:待出售,4.已出售",
					updateTime: '', //更新时间

				}]
			};
		},
		methods: {
			showDialog(id, refs) {
				this.orderId = id
				this.$refs[refs].open('center')
			},
			close(refs) {
				this.$refs[refs].close()
			},
			//重选买家
			ZpConfirm(val) {
				if (!val || val.length === 0) {
					uni.showModal({
						title: '请输入邀请码'
					})
					return
				}
				this.close('Zppopup')
				uni.showLoading({
					title: ''
				})
				setUserInfo(this.orderId, val).then((res) => {
					uni.showModal({
						title: res.msg
					})
					uni.hideLoading()
					this.loadOrders(this.tabCur - 1)
				})
			},
			proxyImgUrl(url){
				console.log(config.api()+'/'+url)
				return config.api()+'/'+url
			},
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				this.page.page = 1
				this.page.size = 25
				this.loadOrders(this.tabCur - 1)
			},
			//加载订单数据
			loadOrders(state) {
				this.orders = []
				allManagerOrders(state, this.page).then((res) => {
					this.orders = res.data
					this.count = res.count
				})

			},
			//下一页
			nextPage() {
				this.page.page = this.page.page + 1
				this.loadOrders(this.tabCur - 1)
			},
			//上一页
			previousPage() {
				this.page.page = this.page.page - 1
				this.loadOrders(this.tabCur - 1)
			},
			//修改订单状态
			clickUpdateOrderStateByOrderId(id, state) {
				updateOrderStateByOrderId(id, state).then((res) => {
					this.loadOrders(this.tabCur - 1)
					uni.showModal({
						title: res.msg
					})
				})
			},
			//一键修改订单状态
			clickUpdateOrderState(state) {
				easyShuttle(state).then((res) => {
					this.loadOrders(this.tabCur - 1)
					uni.showModal({
						title: res.msg
					})
				})
			},
			
		},
		onShow() {
			this.orders = []
		},
		onLoad() {
			this.loadOrders(-1)
		}
	};
</script>

<style scoped>
	.M_oderContain {
		background-color: white;
		height: 100%;
	}

	.orderTitle {
		border: .5px solid #f2f2f2;
		border-bottom: none;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.orderTitle .t_1,
	.orderTitle .t_2,
	.orderTitle .t_3 {
		padding: 0 10px;
		flex: 1;
		height: 41px;
		border: .5px solid #f2f2f2;
		font-size: 14px;
		border-top: none;
		font-weight: 400;
		color: #333;
		line-height: 41px;
		box-sizing: border-box;
	}

	.orderTitle .t_1 {
		border-left: none;
	}

	.orderTitle .t_3 {
		border-right: none;
	}

	.infoList {
		margin-bottom: 5px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.infoList .List_1,
	.infoList .List_2,
	.infoList .List_3 {
		padding: 10px;
		flex: 1;
		box-sizing: border-box;
		border-right: .5px solid #f2f2f2;
		border-bottom: .5px solid #f2f2f2;
	}

	.infoList .List_1 text,
	.infoList .List_2 text {
		color: #2866f9;
	}

	.infoList .List_3 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.buyer_btn,
	.money_btn {
		color: white;
		width: 80px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 5px;
	}

	.oneBtnBg {
		background: #eee;
		padding: 15px 10px;
	}

	.buyer_btn {
		background: #2866f9;
	}

	.money_btn {
		background: #e95555;
	}

	.m_t10 {
		margin-top: 10px;
	}

	.f_red {
		color: #fc4141;
	}

	.f_green {
		color: #288F1A;
	}

	.page_footer {
		position: fixed;
		z-index: 999;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.page_footer .pagination {
		display: flex;
		position: relative;
		overflow: hidden;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.page_footer .pagination view {
		margin-left: 15px;
	}

	.page_footer .pagination .grey_btn {
		background: #eee;
		width: 50px;
		height: 30px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_footer .pagination .blue_btn {
		background: #2866f9;
		width: 30px;
		height: 30px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.page_footer .tips {
		height: 42px;
		background-color: #fff;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		line-height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_footer .tips text {
		color: #fc4141;
	}
</style>